<template>
  
  <div class="configDataPromise">

      <el-dialog
       style="display: flex; height: 900px; overflow: auto;"
       
      title="新增权限"
      :visible.sync="chooseVisible"
      :before-close="handleClose"
      width="800px">
      
      <div style="display: flex; flex-direction: column; align-content: space-around; margin-bottom: 20px;" >
         
        <el-row :gutter="20" style="margin-bottom: 10px;" v-if="type=='shop'">

          <el-col :span="12">
             <el-select
          style="width: 100%"
          v-model="customerShopQueryParams.sellType"
          placeholder="请选择销售平台"
          @change="productFormTypeFn"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in productFormTypeList"
            :key="item.value"
            
          ></el-option>
        </el-select>

          </el-col>
          <el-col :span="12">
           <el-select
          style="width: 100%"
          v-model="customerShopQueryParams.brandId"
          placeholder="请选择品牌"
          @change="brandIdFn"
        >
          <el-option
            :label="item.brandName"
            :value="item.id"
            v-for="item in brandList"
            :key="item.value"
          ></el-option>
        </el-select>
       </el-col>  
        </el-row>

      <el-row>
         <el-input v-model="customerShopQueryParams.name" placeholder="请输入查询内容" style="width: 300px; margin-right: 33px;">
        </el-input>
        <el-button type="primary" @click="getList">搜索</el-button>
      </el-row>
      </div>

       <!-- 表格渲染 -->
       <el-table :data="dataList" style="width: 100%;height: 500px; overflow: auto;"   ref="multipleTable"  @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />

        <el-table-column prop="id" label="ID" width="180"> </el-table-column>
        <el-table-column prop="name" :label="name" width="160" />
        <el-table-column prop="phone" :label="phone" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1" type="success">上架</el-tag>
            <el-tag v-if="scope.row.status == 2" type="danger">下架</el-tag>
          </template>
        </el-table-column>
      </el-table>

      <pagination  
        v-show="customerShopQueryParams.total > 0"
        :total="customerShopQueryParams.total"
        :page.sync="customerShopQueryParams.pageNo"
        :limit.sync="customerShopQueryParams.pageSize"
        @pagination="getList"
        style="margin-bottom: 40px;"
      />
     <div >
       <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="subMitLoading">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>

     </div>


    </el-dialog>
    </div>
</template>

<script>

import {
  getBindList,
  batchBindUserShop
} from "@/api/shop/index";



import {  productFormTypeList  , productFormTypeListDic } from "@/config/index";
import { listBrand } from "@/api/brand/index";
export default {
  name: "choseConfigData",
  props:{
    chooseVisible:Boolean,
    currentCustomer:Object,
    type:String

  },
  data() {
    return {
        form:{},
        subMitLoading:false,
        dataList:[],
        productFormTypeList,
        productFormTypeListDic,
        name:this.type=='factory'? '工厂名称':'店铺名称',
        phone:this.type=='factory'? '工厂电话':'店铺电话',
        multipleSelection:[],
        brandList:[],
        customerShopQueryParams: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        action:'unbind',
        userId:this.currentCustomer.userId,
        name:"",
        bindType:this.type,
        channel:""
        
        
      },
     
    };
  },
  mounted(){

    
   
      let item=this.currentCustomer
      if(this.type=='factory'){
        // console.log("item===》",item)
        this.getList()
      }
    

  },
  created() {
     
    
  },
  methods: {

      brandIdFn(){
      // console.info("品牌选择")
      this.getList()

    },



     productFormTypeFn(){
      this.brandList=[]
      this.customerShopQueryParams.brandId=""
      let sellType=this.customerShopQueryParams.sellType;
      let sellTypeDic=productFormTypeListDic[sellType];
      this.customerShopQueryParams.channel=sellTypeDic
      //根据渠道获取最新的品牌
      listBrand({platformType:sellTypeDic}).then(res=>{
         this.brandList=res.data.records
      })

     },




    handleClick(){
    
     



    },


    submitForm(){
      this.subMitLoading=true
      batchBindUserShop({
        userId:this.currentCustomer.userId,
        type:this.type,
        bizId:this.multipleSelection.map(res=>{return res.id})
      }).then(res=>{
        this.$emit('close-chose-event',this.type)
        this.subMitLoading=false
      })



    },

     handleSelectionChange(val) {
        this.multipleSelection = val;
      },


    getList(){
    
       getBindList(this.customerShopQueryParams).then(res=>{
        this.dataList=res.data.records
        this.customerShopQueryParams.total = res.data.total;
        this.customerShopQueryParams.page = res.data.current;
        this.customerShopQueryParams.limit = res.data.size;
       })
       


    },

    
    handleClose() {
      this.idleShopList = [];
      this.shopList = [];
      this.selectedShop = "";
      this.$emit('close-chose-event')
    },

   
    deleteShopStaff(item) {
      unbindShopUser({
        shopId: item.id,
        userId: this.currentCustomer.userId,
      }).then((res) => {
        this.$message.success("删除成功");
        this.getList(this.currentCustomer);
      });
    },

      getCustomerShopList({ page, limit }) {
      getCustomerShopList({
        userId: this.currentCustomer.userId,
        pageNo: page || this.customerShopQueryParams.page,
        pageSize: limit || this.customerShopQueryParams.limit,
      }).then(({ data }) => {
        this.shopList = data.records;
        this.customerShopQueryParams.total = data.total;
        this.customerShopQueryParams.page = data.current;
        this.customerShopQueryParams.limit = data.size;
      });
    },

    bindShop() {
      if (this.selectedShop === "") {
        this.$message.error("请选择员工");
        return;
      }
      this.bindLoading = true;
      bindShopUser({
        shopId: this.selectedShop,
        userId: this.currentCustomer.userId,
      })
        .then((res) => {
          this.bindLoading = false;
          this.selectedShop = "";
          this.$message.success("绑定成功");
          this.getList(this.currentCustomer);
        })
        .catch(() => {
          this.bindLoading = false;
        });
    },

    
   
  },
};
</script>

<style  lang="scss">

.dialog-footer{
  margin-top: 10px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;

}




</style>
